<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/require-v-for-key -->
<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="box">
    <!-- 头部导航栏 -->
    <div class="Navigation">
      <van-nav-bar title="帮助" left-arrow @click-left="onClickLeft" />
    </div>

    <div class="tabsr">
      <van-tabs v-model:active="active">
        <van-tab title="内科">
          <div class="Helps" v-for="list in data" :key="list.id" @click="skip(list)">
            <p>{{ list.text }}</p>
            <p>{{ list.date }}</p>
            <p>
              <span style="margin-left: 200px; margin-right: 30px"
                >建议: {{ list.suggestion }}</span
              >
              <span>收藏: {{ list.favorite }}</span>
            </p>
          </div>
        </van-tab>
        <van-tab title="眼科">内容 2</van-tab>
        <van-tab title="骨科">内容 3</van-tab>
        <van-tab title="小儿科">内容 4</van-tab>
        <van-tab title="传染科">内容 1</van-tab>
        <van-tab title="皮肤科">内容 2</van-tab>
        <van-tab title="耳鼻喉科">内容 3</van-tab>
        <van-tab title="精神科">内容 4</van-tab>
      </van-tabs>
    </div>

    <div class="di">
      <div>
        <router-link to="./Home"><van-icon class="bbb" name="wap-home-o" size="40" /></router-link>
      </div>
      <div class="bj">
        <router-link to="./Copyreader"
          ><van-icon name="edit" size="40" color="#ffe457"
        /></router-link>
      </div>
      <div>
        <router-link to="./Videosr"><van-icon class="you" name="play-circle-o" size="40" /></router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import { ref } from 'vue'
const onClickLeft = () => history.back()
const active = ref(0)

const data = [
  {
    id: 1,
    text: '奋发进取',
    date: '2024-08-21 00:00',
    suggestion: '0',
    favorite: '0'
  },
  {
    id: 2,
    text: '好好学习',
    date: '2023-08-21 00:00',
    suggestion: '0',
    favorite: '0'
  },
  {
    id: 3,
    text: '天天向上',
    date: '2022-08-21 00:00',
    suggestion: '0',
    favorite: '0'
  },
  {
    id: 4,
    text: '勤学苦练',
    date: '2021-08-21 00:00',
    suggestion: '0',
    favorite: '0'
  },
  {
    id: 5,
    text: '勤学苦练',
    date: '2021-08-21 00:00',
    suggestion: '0',
    favorite: '0'
  }
]

const skip = (list: {
  id: number
  text: string
  date: string
  suggestion: string
  favorite: string
}) => {
  // console.log('点击了')
  // 将 list 对象转换为 JSON 字符串，然后保存到 localStorage
  // 注意：localStorage 只能存储字符串，所以我们需要将对象转换为字符串
  const listStr = JSON.stringify(list)
  // 假设我们根据 id 保存每个项，你可以根据需要修改 key
  localStorage.setItem(`item-${list.id}`, listStr)

  // 你可以在这里添加其他逻辑，比如显示一个成功的提示等
  console.log(`已保存数据项 ID: ${list.id}`)
  router.push('/Helpxx')
}
</script>

<style scoped lang="scss">
.you{
    position: absolute;
    right: 50px;
    top: 10px;
}
.bbb{
    position: absolute;
    top: 10px;
    left: 50px;
}
p {
  margin-top: 20px;
  line-height: 10px;
  margin-left: 18px;
}

.Helps {
  width: 100vw;
  height: 100px;
  border-bottom: solid 2px #ccc;
}

.box {
  // background: pink;

  .Navigation {
    width: 100%;
    height: 7%;
    // background: red;
  }

  .tabsr {
    width: 100%;
    height: 83%;
    overflow-y: auto;
    // background: pink;
  }

  .di {
    width: 100%;
    height: 10%;
    display: flex;
    position: relative;
    // background: rgb(66, 143, 61);

    div {
      line-height: 80px;
    }
  }
}

.bj {
  position: absolute;
  left: 155px;
  top: -25px;
  width: 60px;
  height: 60px;
  text-align: center;
  // line-height: 20px;
  background: #3087ea;
  border-radius: 50%;
}
</style>